<template>
  <div>
    <el-breadcrumb separator-class="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>前台用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="输入登录名" v-model="queryInfo.userName" clearable @clear="getUserinfos"
            @change="getUserinfos(-1)"></el-input>
        </el-col>
      </el-row>
      <!-- 用户列表 -->
      <el-table :data="userlist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="登录名" prop="userName"></el-table-column>
        <el-table-column label="真实姓名" prop="realName"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column label="住址" prop="address"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="注册日期" prop="regDate"></el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status == 0" type="success" size="mini">正常</el-tag>
            <el-tag v-else type="danger" size="mini">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <div v-if="scope.row.status === 0">
              <el-tooltip class="item" effect="dark" content="修改" placement="top" :enterable="false">
                <el-button type="primary" icon="Edit" size="mini"
                  @click="openEditUserInfoDialog(scope.row.id)">修改</el-button>
              </el-tooltip> 
              <el-tooltip class="item" effect="dark" content="禁用" placement="top" :enterable="false">
                <el-button type="danger" icon="Close" size="mini"
                  @click="disableUserInfo(scope.row.id)">禁用</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.curPage" :page-sizes="[5, 10]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-card>

    <!-- 修改用户对话框 -->
    <el-dialog title="修改用户" v-model="editUserInfoDialogVisible" width="30%">
      <el-form ref="editUserInfoFormRef" :model="editUserInfoForm" :rules="editUserInfoFormRules" label-width="0px"
        class="login-form">
        <!-- 用户名称 -->
        <el-form-item prop="userName">
          <el-input v-model="editUserInfoForm.userName" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <!-- 用户密码 -->
        <el-form-item prop="password">
          <el-input v-model="editUserInfoForm.password" placeholder="请输入用户密码"></el-input>
        </el-form-item>
        <!-- 真实姓名 -->
        <el-form-item prop="realName">
          <el-input v-model="editUserInfoForm.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item prop="sex">
          <el-radio v-model="editUserInfoForm.sex" label="男">男</el-radio>
          <el-radio v-model="editUserInfoForm.sex" label="女">女</el-radio>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item prop="address">
          <el-input v-model="editUserInfoForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item prop="email">
          <el-input v-model="editUserInfoForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserInfoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";

const queryInfo = reactive({
      name: "",
      curPage: 1,
      pageSize: 5,
    });

const userlist = ref(null);
const total = ref(0);
const editUserInfoDialogVisible = ref(false);
const editUserInfoForm = reactive({
  id: "",
  userName: "",
  password: "",
  realName: "",
  sex: "",
  address: "",
  email: ""
});
const editUserInfoFormRef = ref(null);

const editUserInfoFormRules = reactive({
  userName: [
    { required: true, message: "请输入用户名称", trigger: "blur" }
  ],
  password: [{ required: true, message: "请输入用户密码", trigger: "blur" }]
});

const {proxy}=getCurrentInstance()
const getUserinfos = async flag => {
  if (flag == 0 || flag == -1) {
    queryInfo.curPage = 1;
  }
  // 分页获取管理员列表
  const { data: res } = await proxy.$axios.get("userinfos", {
    params: {
          userName: queryInfo.name,
          curPage: queryInfo.curPage,
          pageSize: queryInfo.pageSize,
        },
  });
  if (res.code != 0) {
    userlist.value = [];
    return proxy.$message.error("没有用户记录!");
  }

  console.log(res);
  userlist.value = res.userInfos;
  total.value = res.total;
};

// pageSize改变事件处理函数
const handleSizeChange = pageSize => {
  queryInfo.pageSize = pageSize;
  getUserinfos();
};

// page改变事件处理函数
const handleCurrentChange = curPage => {
  // console.log(curPage);
  queryInfo.curPage = curPage;
  getUserinfos();
};

// 用户禁用
const disableUserInfo = async id => {
  const { data: res } = await proxy.$axios.put(`userinfos/id/${id}/status`);
  if (res.code !== 0) return proxy.$message.error("禁用失败!");
  proxy.$message.success("禁用成功!");
  getUserinfos();
};

// 打开修改对话框
const openEditUserInfoDialog = async id => {
  console.log("打开修改对话框");
  editUserInfoDialogVisible.value = true;
  const { data: res } = await proxy.$axios.get(`userinfos/id/${id}`);
  // console.log(res.adminInfo);
  if (res.code != 0) return proxy.$message.error("获取数据失败!");
  editUserInfoForm.userName = res.userInfo.userName;
  editUserInfoForm.password = res.userInfo.password;
  editUserInfoForm.realName = res.userInfo.realName;
  editUserInfoForm.sex = res.userInfo.sex;
  editUserInfoForm.address = res.userInfo.address;
  editUserInfoForm.email = res.userInfo.email;
  editUserInfoForm.id = res.userInfo.id;
};

// 修改用户
const editUserInfo = () => {
  editUserInfoFormRef.value.validate(async valid => {
    if (!valid) return;
    var userName = editUserInfoForm.userName;
    var password = editUserInfoForm.password;
    var realName = editUserInfoForm.realName;
    var sex = editUserInfoForm.sex;
    var address = editUserInfoForm.address;
    var email = editUserInfoForm.email;
    var id = editUserInfoForm.id;
    // 判断用户名称是否已存在
    const { data: res1 } = await proxy.$axios.get(
      `userinfos/userName/${userName}/id/${id}`
    );
    if (res1.code !== 0) return proxy.$message.error("该用户名称已存在!");
    const { data: res2 } = await proxy.$axios.put(`userinfos`, {
      userName: userName,
      password: password,
      realName: realName,
      sex: sex,
      address: address,
      email: email,
      id: id
    });
    if (res2.code !== 0) return proxy.$message.error("修改失败!");
    proxy.$message.success("修改成功!");
    getUserinfos();
    editUserInfoDialogVisible.value = false;
  });
};

onMounted(() => {
  getUserinfos();
});

</script>

<style lang="less" scoped></style>
